<template>
	<div class="login">
	    <div class="title"></div>
	    <div class="box">
	      <div class="boxTitle">登录</div>
	      <div class="boxBody">
	        <div class="boxTop">
				
	          <div @click="tiaoZhang" :class="{'boxAct': boxAct1}" >
	          	账号登录
	          </div>
			  <div @click="tiaoZhu" :class="{'boxAct': !boxAct1}">
			  	验证码登录
			  </div>
	        </div>
	        <div>
				<div class="zhang" v-show="boxAct1">
				    <div class="zhangTitle">账号</div>
				    <div class="zhangInput">
				      <input type="text" placeholder="请输入您的账号" v-model="userName" />
				    </div>
				    <div class="zhangTitle">密码</div>
				    <div class="zhangInput">
				      <input type="password" v-model="password" placeholder="请输入您的密码" />
				    </div>
				    <div class="warning" v-show="warning">
				      您输入的账号或者密码不对请重新输入
				    </div>
				    <br />
				    <navigator class="goZhu" url="../zhu/zhu">没有账号？立即注册</navigator>
				    <button type="default" @click="login">立即登录</button>
				  </div>
				  
				  <!-- 验证码 -->
				  <view class="yan" v-show="!boxAct1">
				  	<view class="">
				  		<view class="">
				  			中国+86
				  		</view>
						<input type="text" value="手机号" />
				  	</view>
					<view class="">
						<input type="text" value="" />
						<view class="">
							接收
						</view>
					</view>
					<navigator class="goZhu" url="../zhu/zhu">没有账号？立即注册</navigator>
					<button type="default">立即登录</button>
				  </view>
				        
			</div>
	      </div>
	    </div>
	  </div>
</template>

<script>
	export default {
		data() {
			return {
				boxAct1:true,
				userName:"",
				password:"",
				warning:false
			}
		},
		methods: {
			tiaoZhang(){
				this.boxAct1 = true
			},
			tiaoZhu(){
				this.boxAct1 = false
			},
			login(){
				if(this.userName.length == 0|| this.password.length == 0){
					this.warning = true
				}else{
					uni.request({
					    url: 'http://localhost:8080/user/findUser/'+this.userName+'/'+this.password, 
					    success: (res) => {
							console.log(res.data.shen)
					        if (res.data.shen == "teacher") {
								this.warning = false;
								uni.navigateTo({
								    // url: '/pages/index/index'
									url:'../index/test/test'
								});
							}else if(res.data.shen == "student") {
								this.warning = false;
								uni.navigateTo({
								    url: '/pages/index/studentSelf?id='+res.data.id
								});
							}else{
								this.warning = true;
							}
					    }
						
					});
				}
				
			}
		}
	}
</script>

<style>
	.goZhu{
		color: #007AFF;
		text-align: left;
		margin: 20rpx 0rpx;
	}
	page{
		height: 100%;
	}
.login {
  width: 100%;
  height: 100%;
 
  background:  url("https://s3.ax1x.com/2020/12/11/rAswlR.jpg")  no-repeat ;
  background-size: cover;
}
.box {
  width: 100%;
  text-align: center;
  height: 500px;
  background: white;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px 2px black;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -40%);
}
.title {
  color: white;
  font-size: 50px;
  font-weight: bold;
  text-shadow: 0 2px 10px black;
  height: 150px;
  line-height: 150px;
  letter-spacing: 30px;
  text-align: center;
}
.title::after {
  content: "学生管理";
}

.boxTop > div {
  width: 50%;
  color: rgb(129, 169, 214);
  height: 40px;
  font-size: 25px;
  line-height: 40px;
  cursor: pointer;
}
.boxTop {
  display: flex;
}
.boxTitle {
  font-size: 30px;
  color: white;
  text-shadow: 0 2px 10px rgb(255, 255, 255);
  background: rgb(129, 169, 214);
  height: 50px;
  line-height: 50px;
}
.boxAct {
  background: white;
}
.boxBody {
  padding: 0 10px;
}
.zhangInput > input {
  background: none !important;
  color: white;
  border: none;
  outline: none;
  border-bottom: 2px solid white;
  width: 100%;
}
.zhangInput > input::placeholder {
  color: white;
  font-size: 15px;
}
.zhangTitle {
  font-size: 20px;
  color: white;
  text-shadow: 0 1px 5px lavenderblush;
  text-align: left;
}
.zhang > div {
  margin-top: 20px;
}
button {
  margin-top: 30px;
}
.warning {
  color: #f56c6c;
}
.yan{
	margin-top: 40rpx;
}
.yan>view{
	display: flex;
	background: white;
	height: 80rpx;
	align-items: center;
	
	margin-top: 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
	justify-content: space-between;
}
.yan>view>view{
	background: #f5f7fa;
	color: #acafb4;
	width: 20%;
	height: 100%;
	line-height: 80rpx;
	
}
.yan>view>input{
	height: 100%;
	padding: 10px 0rpx;
	text-align: left;
	width: 78%;
}
</style>
